<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <div v-show="!show_main && !hidden_menu">
        <left></left>
      </div>
      <el-container>
        <el-header style="padding: 0">
          <div v-show="!show_main">
            <top></top>
          </div>
          <tabs></tabs>
        </el-header>
        <el-main style="background: #f0f2f5; height: 100%; overflow: hidden">
          <!-- <router-view></router-view> -->
          <!-- <transition :name="transitionName" mode="out-in">
            <router-view class="router-view" v-slot="{ Component }">
              
            </router-view>
          </transition> -->
          <transition :name="transitionName" mode="out-in" v-loading="loading">
            <router-view class="router-view" v-slot="{ Component }">
              <!-- <keep-alive
                exclude="mould_list,szlsProList,left,top,tabs"
                :key="$route.name"
              >
              </keep-alive> -->

              <component :is="Component" />
            </router-view>
          </transition>
        </el-main>
      </el-container>
      <div class="setup" v-if="show_main">
        <el-tooltip content="工程配置" placement="bottom">
          <svgBtn
            style="
              font-size: 20px !important;
              padding: 5px;
              margin: 0 5px;
              border-radius: 3px;
              height: 20px;
              line-height: 20px;
            "
            :style="{
              backgroundColor: svg_color == '#3580eb' ? '#ECF4FF' : '',
            }"
            :color="svg_color"
            @mouseenter="svg_color = '#3580eb'"
            @mouseleave="svg_color = '#45474A'"
            icon="setup"
            @click="show_setup_box = true"
          ></svgBtn>
        </el-tooltip>
      </div>
    </el-container>
    <el-drawer
      v-model="show_setup_box"
      direction="rtl"
      size="30%"
      :close-on-click-modal="false"
    >
      <template #title>
        <h4>项目配置</h4>
      </template>

      <template #default>
        <set_up @close="show_setup_box = false" :show_main="!show_main"></set_up>
      </template>
    </el-drawer>
    <div class="lock_box" v-if="lock_box">
      <div v-if="!show_lock_input">
        <div style="font-size: 200px">{{ time_list[0] }}</div>
        <div class="fs_30" style="margin-bottom: 80px">
          {{ time_list[1] }} {{ time_list[2] }}
        </div>
        <div class="lock_icon" @click="show_lock_input = true">
          <svgBtn icon="suoding" style="font-size: 40px"></svgBtn>
        </div>
        <div class="m_top15">点击解锁</div>
      </div>
      <div
        v-else
        style="
          width: 100%;
          height: 100%;
          background: rgba(9, 28, 54, 0.26);
          backdrop-filter: blur(3px);
        "
      >
        <div style="font-size: 40px">{{ time_list[0] }}</div>
        <div class="fs_20" style="margin-bottom: 80px">
          {{ time_list[1] }} {{ time_list[2] }}
        </div>
        <div class="tc m_bottom30">
          <img
            v-if="user_info?.avatarUrl != ''"
            :src="user_info?.avatarUrl"
            style="
              width: 96px;
              height: 96px;
              border-radius: 50%;
              border: 2px solid #c7d2e2;
            "
            alt=""
          />
          <img
            v-else
            src="@/assets/img/headerImg.png"
            style="
              width: 96px;
              height: 96px;
              border-radius: 50%;
              border: 2px solid #c7d2e2;
            "
            alt=""
          />
          <div class="m_top10">{{ user_info?.name }}</div>
        </div>
        <el-input
          placeholder="请输入密码"
          style="border: 1px solid #fff; width: 320px"
          v-model="lock_keyword"
          @keyup.enter="close_lock"
        ></el-input>
        <div class="flex_js" style="width: 320px; margin: 10px auto 30px auto">
          <span @click="show_lock_input = false" style="cursor: pointer">返回</span>
          <span @click="close" style="cursor: pointer">退出</span>
        </div>
        <el-button type="primary" style="width: 320px; height: 48px" @click="close_lock"
          >进入系统</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { dictData } from "@/utils/check_role";
import left from "./container/left.vue";
import top from "./container/top.vue";
import tabs from "./container/tabs.vue";
import Eventbus from "@/utils/EventBus";
import svgBtn from "@/components/svg_button.vue";
import set_up from "@/view/components/setup.vue";
import { ref, onBeforeMount, onUnmounted, computed } from "vue";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { getCookie, setCookie } from "@/utils/cookie";
import router from "@/route";

const transitionName = ref("slide-left");
const store = useStore();
const show_main = computed(() => {
  return store.state.is_all_page;
});
const hidden_menu = computed(() => {
  return store.state.is_top_menu;
});
const svg_color = ref("#45474A");
const show_setup_box = ref(false);
// const enterprise_list = ref([])
const lock_box = ref(false);
const time_list = ref([]);
const show_lock_input = ref(false);
const lock_keyword = ref(""); // 锁屏密码
const loading = ref(false);
const currentRoute = ref();
onBeforeMount(() => {
  console.log(router.currentRoute.value.name);
  currentRoute.value =
    router.currentRoute.value.name == "home"
      ? "function"
      : router.currentRoute.value.name;
  dictData("1541665967619182594").then((res) => {
    (res as any).forEach((item) => {
      item.label = item.dictValue;
      item.value = item.dictCode;
    });
    store.commit("set_product_list", res);
  }); // 获取字典值 产品分类
  getBalance_info();
  get_enterprise_list("");
  Eventbus.on("change_enterprise_id", (e) => {
    console.log(e);
    enterpriseId.value = e as any;
    get_enterprise_list(e);
    getBalance_info();
  });
  Eventbus.on("lock", () => {
    lock_box.value = true;
  });
  Eventbus.on("getBalance_info", () => {
    getBalance_info();
  });

  var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  var d = new Date();
  time_list.value[0] = d.getHours() + ":" + d.getMinutes();
  time_list.value[1] = d.getMonth() + 1 + "月" + d.getDate() + "日";
  time_list.value[2] = weekday[d.getDay()];
  console.log(time_list.value);
  if (getCookie("lock_keyword")) {
    lock_box.value = true;
  }
});
const getBalance_info = () => {
  axios
    .request({ url: serviceApi.getBalance_info, method: "get" })
    .then((res) => {
      store.commit("set_balance_info", res.data);
    })
    .catch((error) => {
      ElMessage.error(error);
    });
};
// 锁屏
const close_lock = () => {
  if (lock_keyword.value != getCookie("lock_keyword")) {
    ElMessage.error("请输入正确的锁屏密码");
  } else {
    lock_keyword.value = "";
    show_lock_input.value = false;
    lock_box.value = false;
    setCookie("lock_keyword", "", -1);
  }
};
const close = () => {
  setCookie("lock_keyword", "", -1);
  window.close();
};
const enterpriseId = ref(
  getCookie("enterprise_id")
    ? getCookie("enterprise_id")
    : store.state.enterprise_id
    ? store.state.enterprise_id
    : ""
);
// const enterpriseLevel = ref()
const user_info = ref();
const get_enterprise_list = (e) => {
  console.log(enterpriseId.value);
  loading.value = true;
  store.commit("set_enterprise_id", e != "" ? e : enterpriseId.value);
  axios
    .request({
      url: serviceApi.all_enterprise_list,
      method: "post",
    })
    .then((res) => {
      console.log(res, enterpriseId.value);
      res.data.forEach((item) => {
        item.label = item.name;
        item.value = item.id;
        item.children = item.orgList.filter((value) => {
          // 过滤 停用
          return value.status;
        });
      });
      res.data.forEach((item) => {
        let has_copy_mould = item.enterpriseLevelList.some((item1) => {
          return (
            item1.productId == 2 &&
            (item1.levelId == 3 || item1.levelId == 4) &&
            item.isAdmin
          );
        });
        item.has_copy_mould = has_copy_mould;
        if (item.id == enterpriseId.value) {
          store.commit("set_has_copy_mould", has_copy_mould);
          store.commit("set_organizationIdList", [item.id]); // 保存企/组织id  顶部选择栏 回填
          store.commit("set_current_enterprise_level", item.enterpriseLevelList); // 存储当前选择企业的等级
        }
      });
      console.log(res.data);
      store.commit("set_enterprise_list", res.data);
      axios
        .request({ url: serviceApi.getUserInfo, method: "get" })
        .then((res) => {
          user_info.value = res.data;
          setCookie("user_info", JSON.stringify(res.data), 1, "/");
          store.commit("set_user_info", res.data);
          get_role_list();
        })
        .catch((err) => {
          loading.value = false;
          ElMessage.error(err);
        });
    })
    .catch((error) => {
      loading.value = false;
      ElMessage.error(error);
    });
};
const get_role_list = () => {
  axios
    .request({ url: serviceApi.enterprise_role_list, method: "post" })
    .then((res) => {
      if (res.data === null) {
        loading.value = false;
        ElMessage.warning("该企业尚未给你相关权限");
        Eventbus.emit("no_role");
        store.commit("set_role_list", []);
        return;
      }
      Eventbus.emit("has_role");
      res.data.forEach((item) => {
        item.disabled =
          item.name == "企业控制台" ||
          item.name == "运行环境设置" ||
          item.name == "企业信息"
            ? true
            : false;
      });
      store.commit("set_check_role_list", res.data);
      //   filter 过滤后台项目管理
      let has_currentRoute_role = res.data.some((i) => {
        return i.path == "/" + currentRoute.value;
      });
      currentRoute.value = has_currentRoute_role ? currentRoute.value : "function";
      let list = arrToTree(ArrSet(res.data, "id"));
      console.log(list, store.state.current_enterprise_level);
      // 排除没有产品 但有权限
      let has_szls = store.state.current_enterprise_level.some((item) => {
        return item.productId == 4;
      });
      if (!has_szls) {
        list = list.filter((item) => {
          return item.name != "数字孪生";
        });
      }
      // 默认选中菜单 tab 路由  区分二级三级菜单
      Eventbus.emit("change_default_active", "/" + currentRoute.value);
      Eventbus.emit("menu_value", {
        index: "/" + currentRoute.value,
      });
      router.push({
        name: currentRoute.value,
      });
      store.commit("set_role_list", list);
      loading.value = false;
    })
    .catch((error) => {
      loading.value = false;
      ElMessage.error(error);
    });
};
// 数组对象 id 去重
const ArrSet = (Arr, id) => {
  var obj = {};
  const arrays = Arr.reduce((setArr, item) => {
    obj[item[id]] ? "" : (obj[item[id]] = true && setArr.push(item));
    return setArr;
  }, []);
  return arrays;
};
const arrToTree = (list) => {
  var map = {};
  var result = [];
  list.forEach((item) => {
    map[item.id] = item;
  });
  list.forEach((item) => {
    item.label = item.name;
    item.value = item.id;
    let parent = map[item.parentId];
    if (parent) {
      if (!parent.children) {
        parent.children = [];
        parent.children.push(item);
      } else {
        var a = parent.children.some((e) => {
          return e.id == item.id;
        });
        if (!a) {
          parent.children.push(item);
        }
      }
      parent.children.sort((a, b) => {
        return a.sort - b.sort;
      });
    } else if (!parent) {
      result.push(item);
      result.sort((a, b) => {
        return a.sort - b.sort;
      });
    }
  });
  return result;
};
</script>

<style lang="scss" scoped>
.slide-left-enter-from {
  transform: translateX(-20px);
  opacity: 0;
}

.slide-left-enter-to {
  transform: translateX(0px);
}

.slide-left-leave-from {
  transform: translateX(0);
}

.slide-left-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s;
}
.lock_box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/img/lock_bg.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  color: #fff;
  > div {
    padding-top: 150px;
    text-align: center;
  }
  :deep(.el-input) {
    --el-input-placeholder-color: #fff;
    color: #fff;
  }
  .lock_icon {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
  }
  :deep(.el-input__wrapper) {
    color: #fff;
    background-color: rgba(128, 140, 158, 0.26);
  }
  :deep(.el-input__inner) {
    color: #fff;
  }
}
.setup {
  position: fixed;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 50%;
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-container {
  height: 100%;
  overflow: hidden;
}
</style>
